$(function(){
    // 需求1. 初始化文章列表分类
    // 后面需要使用,添加 删除 修改 封装一下
    initArtCateList ()

    // 封装
    function initArtCateList () {
        //发送axios
        axios({
            url:'/my/article/cates',
        }).then(res=>{
            //成功回调
            let {
                data:{message,status,data}
            } = res
            if (status != 0) {
                return layui.layer.msg(message)
            }
            let arr = []
            data.forEach(ele => {
                if (ele.Id < 0) return
                arr.push(`
                    <tr>
                        <td>${ele.Id}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                            <button data-id="${ele.Id}" class="btn-edit layui-btn layui-btn-xs">修改</button> 
                            <button data-id="${ele.Id}" class="layui-btn layui-btn-danger layui-btn-xs remove">删除</button> 
                        </td>
                    </tr>  
                `) 
                $('tbody').empty().html(arr.join(''))
            })

        })
    }

    let indexAdd = 0
    // 需求2 点击 #btnAdd 出现弹出层(layui官方网站定制)
    $('#btnAdd').on('click',function(){
        indexAdd = layui.layer.open({
            type:1 ,
            title: '添加文章分类'
            ,content: `
                <form id="formAdd" class="layui-form" action="">
                    <div class="layui-form-item">
                      <label class="layui-form-label">分类名称</label>
                      <div class="layui-input-block">
                        <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">分类别名</label>
                      <div class="layui-input-block">
                        <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                       <div class="layui-input-block">
                         <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                       </div>
                    </div>
                </form>
            `,
             area: ['500px', '260px']
        })

    })

    
    // 需求3 添加文章分类
    $('body').on('submit','#formAdd',function(e){
        e.preventDefault()
        axios({
            url:'/my/article/addcates',
            method:'post',
            data:$(this).serialize()
        }).then(res=>{
            //成功回调
            let {
                data:{message,status}
            } = res
            if (status != 0) {
                return layui.layer.msg(message)
            }
            layui.layer.msg('恭喜您,添加成功!')
            initArtCateList ()
            //关闭对话框
            layui.layer.close(indexAdd)
        })
    })

    let indexEdit = 0
    // 需求4 修改文章分类
    $('tbody').on('click','.btn-edit',function(){
        indexEdit = layui.layer.open({
            type:1 ,
            title: '修改文章分类'
            ,content: `
                <form id="formEdit"  lay-filter="formEdit" class="layui-form" action="">
                    <input type="hidden" name="Id">
                    <div class="layui-form-item">
                      <label class="layui-form-label">分类名称</label>
                      <div class="layui-input-block">
                        <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">分类别名</label>
                      <div class="layui-input-block">
                        <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                       <div class="layui-input-block">
                         <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                       </div>
                    </div>
                </form>
            `,
             area: ['500px', '260px']
        })
        // $(this).attr('data-id')
        axios({
            url:'/my/article/cates/'+ $(this).attr('data-id'),
        }).then(res=>{
            //成功回调
            let {
                data:{message,status,data}
            } = res
            if (status != 0) {
                return layui.layer.msg(message)
            }
            layui.form.val('formEdit',data)
        })
    })

    // 需求5 确定修改
    $('body').on('submit','#formEdit',function(e){
        e.preventDefault()
        axios({
            url:'/my/article/updatecate',
            method:'post',
            data:$(this).serialize()
        }).then(res=>{
            //成功回调
            let {
                data:{message,status}
            } = res
            if (status != 0) {
                return layui.layer.msg(message)
            }
            layui.layer.msg('恭喜您,修改成功!')
            initArtCateList ()
            //关闭对话框
            layui.layer.close(indexEdit)
        })
    })

    // 需求6 删除文章分类
    $('tbody').on('click','.remove',function(){
        // 保存id
        let id = $(this).attr('data-id')
        layer.confirm('确认删除该分类?', {icon: 3, title:'提示'}, function(index){
            axios({
                 //路由参数 又叫url参数 写在路径中 :删除 /保留 冒号后的单词换成具体的值
                url:`/my/article/deletecate/${id}`,
            }).then(res=>{
                //成功回调
                let {
                    data:{message,status}
                } = res
                if (status != 0) {
                    return layui.layer.msg(message)
                }
                layui.layer.msg('恭喜您,删除文章类别成功')
                initArtCateList ()
            })
            layer.close(index);
          })
    })
})